<template>
	<view class="radio-box">
		<radio :disabled="keys.disabled" v-for="(item, index) in items" :key="index" :checked="index === current" @click="radioChange(index,item[keys.valueKey])">{{item[keys.rangeKey]}}</radio>
	</view>
</template>

<script>
	export default {
		name:"yRadio",
		props: {
			value: '',
			keys: {}
		},
		computed:{
			items(){
				return this.keys.range || [];
			},
			current(){
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i][this.keys.valueKey] === this.value) {
						return i;
					}
				}
				return -1;
			},
		},
		methods: {
			radioChange(index,value) {
				if(this.keys.disabled){
					return ;
				}
				if(this.current == index && !this.keys.required){
					this.$emit('change','');
					this.$emit('input','');
				}else if(this.current != index){
					this.$emit('change',value);
					this.$emit('input',value);
				}
			}
		}
	}
</script>

<style lang="scss">
	.radio-box{
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		radio{
			margin:0 0 10rpx 10rpx;
		}
	}
</style>
